<!-- 用户信息 -->
<template>
  <el-row :gutter="16" v-if="roleKey === 'admin' || roleKey === 'regularAdmin' || roleKey === 'counsellor'">
    <el-col :span="24">
      <ele-card class="card-wrapper">
        <div class="profile-wrapper">
          <div class="profile-main">
            <el-avatar :size="68" :src="loginUser.avatar" class="profile-avatar"/>
            <div class="profile-body">
              <ele-text size="md" type="heading" style="font-weight: normal;line-height: 25px;">
                您好！{{ loginUser.nickName }}老师~<br/>欢迎使用至诚学院就业管理系统！
              </ele-text>
              <ele-text size="base" type="placeholder" :icon="PartlyCloudy">
                <i v-if="weatherObj" :class="'qi-'+weatherObj.data.now.icon"></i>
                <em v-if="weatherObj">当前福州天气{{
                    weatherObj.data.now.text
                  }}，气温{{ weatherObj.data.now.temp }}℃</em>
              </ele-text>
            </div>
          </div>
        </div>
      </ele-card>
    </el-col>
  </el-row>
  <el-row :gutter="16" v-if="roleKey === 'student'">
    <el-col>
      <ele-card class="card-wrapper">
        <div class="profile-wrapper">
          <div class="profile-main">
            <el-avatar :size="68" :src="loginUser.avatar" class="profile-avatar"/>
            <div class="profile-body">
              <ele-text size="xl" type="heading" style="font-weight: normal;line-height: 25px;font-size: 18px;">
                你好！{{ loginUser.nickName }}同学~<br/>欢迎使用至诚学院就业管理系统！
              </ele-text>
              <ele-text type="placeholder" :icon="PartlyCloudy">
                <i v-if="weatherObj" :class="'qi-'+weatherObj.data.now.icon"></i>
                <em v-if="weatherObj">当前福州天气{{
                    weatherObj.data.now.text
                  }}，气温{{ weatherObj.data.now.temp }}℃</em>
              </ele-text>
            </div>
          </div>
        </div>
      </ele-card>
    </el-col>
  </el-row>
  <el-row :gutter="16" v-if="roleKey === 'company'">
  </el-row>



</template>

<script setup>
import axios from 'axios';
import {computed, watch, ref, reactive} from 'vue';
import {
  PartlyCloudy,
  Briefcase,
  Checked,
  BellFilled
} from '@element-plus/icons-vue';
import {useUserStore} from '@/store/modules/user';

const props = defineProps({
  /** 修改回显的数据 */
  roleKey: String
});

const userStore = useUserStore();
/** 当前登录用户信息 */
const loginUser = computed(() => userStore.info ?? {});

const weatherObj = ref(null);
const getWeather = () => {
  axios.get("https://devapi.qweather.com/v7/weather/now?location=101230101&key=536fc6fb262646e295a86eb59eaf2646")
    .then((value) => {
      weatherObj.value = value;

    });
}
getWeather();//获取天气
</script>

<style lang="scss" scoped>
.profile-wrapper {
  //display: flex;
  align-items: center;

  .profile-main {
    flex: 1;
    display: flex;
    align-items: center;
    overflow: hidden;

    .profile-avatar {
      flex-shrink: 0;
    }

    .profile-body {
      flex: 1;
      padding-left: 12px;
      box-sizing: border-box;
    }

    h4 {
      margin-bottom: 6px;
    }
  }
}

.profile-count {
  flex-shrink: 0;
  text-align: right;
  white-space: nowrap;

  .profile-count-item {
    display: inline-block;
    margin: 0 4px 0 24px;

    .el-tag {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      line-height: 0;
      padding: 0;
    }

    .profile-count-name {
      margin-left: 8px;
    }

    .profile-count-header {
      display: flex;
      align-items: center;
      margin-bottom: 4px;
    }
  }
}

@media screen and (max-width: 992px) {
  .profile-count .profile-count-item {
    margin: 0 2px 0 12px;
  }
}

@media screen and (max-width: 768px) {
  .profile-wrapper {
    display: block;

    .profile-count {
      margin-top: 14px;
    }
  }
}


.card-wrapper {
  background-image: url("@/assets/user-card-bg.png");
  background-size: contain; /* 关键属性 */
  background-repeat: no-repeat;
  background-position: right center;
}

.mini-card-word {
  font-size: 18px;
  font-weight: bold;;
}
</style>
